<template>
  <div>
    <!-- 查询 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item label="项目类型">
    <el-select v-model="form.type" placeholder="请选择" clearable>
      <el-option label="付费项目" value="付费项目"></el-option>
      <el-option label="免费项目" value="免费项目"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="">
    <el-input v-model="form.name" placeholder="请输入关键字"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="findPage()" >搜索</el-button>
    <el-button type="primary" icon="el-icon-search" @click="add()" >新增服务项目</el-button>

  </el-form-item>
</el-form>
   <!--  表  -->
   <el-table
      ref="multipleTable" :data="tableData" tooltip-effect="dark"
      style="width: 95%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
 
      <el-table-column prop="id" label="编号" width="80"> </el-table-column>
      <el-table-column prop="name" label="项目名称" width="120px"></el-table-column>
      <el-table-column prop="number" label="次数" width="80px">
        <template slot-scope="scope">
            <span style="color: blue;">{{ scope.row.number }}次</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="项目类型" width="100px"></el-table-column>
      <el-table-column prop="price" label="项目原价(元)" width="80px">
        <template slot-scope="scope">
            <span style="color: red;">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="introduce" label="项目介绍" width="300px"></el-table-column>

   
      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
             <el-link type="primary" @click="dd(scope.row)">编辑</el-link>
             <span>&nbsp;&nbsp;&nbsp;</span>
      <el-link type="danger" @click="sc(scope.row.id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!--  分页  -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pn"
      :page-sizes="[2, 3, 4, 5]"
      :page-size="ps"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 添加还是修改 -->
    <el-dialog   :title="pojo.id ? '编辑' : '新增服务项目'"  fullscreen="true" :visible.sync="dialogFormVisible">
  <el-form :model="pojo" :inline="true" label-width="100px">
    <div>
      <el-form-item  label="项目名称" >
      <el-input v-model="pojo.name" style="width: 200px;"></el-input>
    </el-form-item> 
     <el-form-item  label="服务次数" >
      <el-input v-model="pojo.number" style="width: 200px;"></el-input>
    </el-form-item>
    </div>
    <div>
      <el-form-item label="项目类型">
    <el-select v-model="pojo.type" placeholder="请选择" clearable>
      <el-option label="免费项目" value="免费项目"></el-option>
      <el-option label="付费项目" value="付费项目"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item  label="项目原价" >
      <el-input v-model="pojo.price" style="width: 200px;"></el-input>
    </el-form-item>
    </div>
  <el-form-item  label="服务介绍" >
      <el-input type="textarea" v-model="pojo.introduce" style="width: 500px;"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer" style="float: left;">
    <el-button @click="dialogFormVisible = false">返 回</el-button>
    <el-button type="primary" @click="saveOrUpdate()">保 存</el-button>
  </div>
</el-dialog>


  </div>
</template>

    <script>
import axios from "axios";
export default {
  data() {
    return {
      form: {},
      pn:1,
        ps:7,
        total:0,
        tableData: [ ],
        dialogFormVisible:false,
        pojo:{},

    };
  },
  methods: {

    sc(id){

      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(`itempm/delete/${id}`).then((res) => {
        this.findPage();
        this.$message.success("删除成功");
      })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

 
    },

    dd(row){
      this.pojo = row;
      this.dialogFormVisible = true;
    },
       // 添加or修改
       saveOrUpdate(){
      axios.post(`itempm/saveOrUpdate`,this.pojo).then((res) => {
        this.$message.success("操作成功");
        this.dialogFormVisible = false;
        this.findPage();
        });
    },
    add(){
      this.pojo = {};
      this.dialogFormVisible = true;
    },
    // 分页查询
    findPage() {
      axios.post(`itempm/findPage/${this.pn}/${this.ps}`,this.form).then((res) => {
        this.tableData = res.data.data.records;
        console.log(JSON.stringify(res.data.data.records))
        console.log(JSON.stringify(this.tableData+"7777777777777777777777777777777777777"))
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.ps = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pn = val;
      this.findPage();
    },
    //多选框数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.findPage();

  },
};
</script>

<style scoped>

</style>